<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>



	<script type="text/babel">
		class Person extends React.Component {
			// 构造器是否接收props,是否传递给super,取决是否希望在构造器中通过this访问props
			constructor(props) {
				super(props)	
				console.log(this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name: PropTypes.string.isRequired, //name,字符串必填
				sex: PropTypes.string, //sex字符串,默认值为男
				age: PropTypes.number, //age数字类型,默认值为18
			}

			//指定默认标签属性值
			static defaultProps = {
				sex: '男',
				age: 18
			}

			state = {}

			render() {
				const { name, age, sex } = this.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
			}
		}

		ReactDOM.render(<Person name="jerry" />, document.getElementById('test1'))
	</script>
</body>

</html>